<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from 'element-plus'
import { queryAllDepts, addDept, getDeptById, editDept, deleteDeptById } from "@/api/dept";
import { ElMessageBox } from 'element-plus'
const tableData = ref([]);
const handleEdit = async (row) => {
  const result = await getDeptById(row.id);
  if (result.code == 1) {
    form.value = result.data;
    dialogFormVisible.value = true;
    dialogTitle.value = "编辑部门";
  } else {
    ElMessage.error('查询部门失败');
  }

}
const dialogFormVisible = ref(false);
const form = ref({ name: "" });
const dialogTitle = ref("新增部门");
const handleDelete = (row) => {
  //弹出确认窗口,如果确定要删除，则调用deleteDeptById函数进行删除
  ElMessageBox.confirm(
    '你确定要删除该部门吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      //点击确定，则调用deleteDeptById方法进行删除
      const result = await deleteDeptById(row.id);
      if (result.code == 1) {
        ElMessage.success('删除部门成功');
        search(); //重新搜索部门列表
      } else {
        ElMessage.error('删除部门失败');
      }
    })
}
const deptFormRef = ref(null);
const formRules = ref({
  name: [
    { required: true, message: '请输入部门名称', trigger: 'blur' },
    { min: 3, max: 20, message: '最少3个字符，最多20个字符', trigger: 'blur' },
  ]
});
function showAddwin() {
  dialogFormVisible.value = true; //显示新增窗口
  form.value = {}; //将窗口里的表单数据置空
}
async function search() {
  let result = await queryAllDepts();
  if (result.code == 1) {
    tableData.value = result.data;
  } else {
    ElMessage.error('数据加载失败');
  }

};
//保存部门
async function save() {
  deptFormRef.value.validate(async valid => {
    if (!valid) {
      return;
    }
    let result;
    if (form.value.id) {
      result = await editDept(form.value);
    } else {
      result = await addDept(form.value);
    }
    if (result.code == 1) {
      ElMessage.success('部门保存成功'); //弹窗提示操作成功
      dialogFormVisible.value = false;  //隐藏dialog窗口
      form.value = {}; //重置新增表单
      search(); //重新搜索部门列表
    } else {
      ElMessage.error('部门保存失败');
    }

  });
}
onMounted(() => {
  search();
})
</script>

<template>
  <!-- 新增按钮 -->
  <el-button type="primary" @click="showAddwin">
    新增部门
  </el-button>
  <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="500">
    <el-form ref="deptFormRef" :model="form" :rules="formRules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" type="index" label="序号" width="180" align="center" />
    <el-table-column prop="name" label="部门名称" width="180" align="center" />
    <el-table-column prop="updateTime" label="最后操作时间" align="center" />
    <el-table-column label="操作" width="180" align="center">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">
          编辑
        </el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped></style>
